<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'

defineOptions({ name: 'ContentWrap' })

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('content-wrap')

defineProps({
  title: propTypes.string.def(''),
  message: propTypes.string.def(''),
  styleParams: propTypes.object.def({
    backgroundColor: '#fff!important',
    padding:'20px',
    borderRadius: '8px!important'
  })
})
</script>

<template>
  <ElCard :class="['cardColor','mb-10px']" :style="styleParams" shadow="never" :body-style="{padding:'0px'}">
    <template v-if="title" #header>
      <div class="flex items-center">
        <span class="text-16px font-700">{{ title }}</span>
        <ElTooltip v-if="message" effect="dark" placement="right">
          <template #content>
            <div class="max-w-200px">{{ message }}</div>
          </template>
          <Icon :size="14" class="ml-5px" icon="ep:question-filled" />
        </ElTooltip>
      </div>
    </template>
    <div>
      <slot></slot>
    </div>
  </ElCard>
</template>

<style scoped>
::deep(.cardColor){
  background-color: #fff!important;
  box-sizing: border-box!important;
  border-radius: 8px!important;
  border: 1px solid #fff;
  box-sizing: border-box;
}
</style>
